<template>
    <div id="teamAdd">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field
                        v-model="addTeamData.name"
                        name="name"
                        label="队伍名称"
                        placeholder="请输入队伍名称"
                        :rules="[{ required: true, message: '请输入队伍名称' }]"
                />
                <van-field
                        v-model="addTeamData.description"
                        rows="4"
                        autosize
                        label="队伍描述"
                        type="textarea"
                        placeholder="请输入队伍描述"
                />
                <van-field
                        is-link
                        readonly
                        clickable
                        name="date-picker"
                        label="过期时间"
                        :value="addTeamData.expireTime"
                        v-model="addTeamData.expireTime"
                        :placeholder="'点击选择过期时间'"
                        @click="showPicker = true"
                />
                <van-popup v-model:show="showPicker" position="bottom">
                    <van-picker-group
                            title="设定过期日期"
                            :tabs="['选择日期', '选择时间']"
                            @confirm="onConfirm"
                            @cancel="showPicker = false"
                    >
                        <van-date-picker
                                v-model="currentDate"
                                :min-date="minDate"
                        />
                        <van-time-picker
                                v-model="currentTime"
                                :columns-type="columnsType"
                        />
                    </van-picker-group>
                </van-popup>

                <van-field name="radio" label="状态">
                    <template #input>
                        <van-radio-group v-model="addTeamData.status" direction="horizontal">
                            <van-radio name="0">公开</van-radio>
                            <van-radio name="1">私密</van-radio>
                            <van-radio name="2">加密</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                        v-model="addTeamData.password"
                        v-if="Number(addTeamData.status) === 2"
                        type="password"
                        name="Password"
                        label="加密密码"
                        placeholder="请输入加密密码"
                        :rules="[{ required: true, message: '请填写加密密码' }]"
                />
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup lang="ts">
    import {useRouter,useRoute} from 'vue-router'
    import {ref,onMounted} from 'vue'
    import myAxois from "../plugin/MyAxios";
    import {showFailToast, showSuccessToast} from "vant";

    //---------------------过期时间----------------------
    const showPicker = ref(false);
    const currentDate = ref(['2022', '06', '01']); //定义一个初始时间(年月日)
    const currentTime = ref(['12', '00', '00']); //定义一个初始时间(时分秒)
    const columnsType = ['hour', 'minute', 'second'];
    const router = useRouter();
    const route = useRoute();
    const onConfirm = () => {
        //组合过期时间，'T'是满足后端序列化配的
        addTeamData.value.expireTime = currentDate.value.join('-') + 'T' +
            currentTime.value.join(':');
        showPicker.value = false; //有了这行才会使picker点击“确认”后自动关闭
    };
    const minDate = new Date();
    //--------------------------------------------------

    const addTeamData = ref({});

    //接收 TeamCardList传过来的id
    const id = route.query.id;

    /**
     * 当这个页面加载的时候获取所要更新的队伍信息
     */
    onMounted(async () =>{
        if(id <= 0){
            showFailToast("队伍更新失败")
            return;
        }
        const res = await myAxois.get("/team/get",{
            params:{
                id,
            }
        })
        if(res?.data.code === 0){
            addTeamData.value = res.data.data;
        }else{
            showFailToast("Fail")
        }
    })

    /**
     * 点击提交按钮，更新队伍信息
     * @returns {Promise<void>}
     */
    const onSubmit = async () =>{
        const postData = {
            ...addTeamData.value,
            status:Number(addTeamData.value.status)
        }
        const res = await myAxois.post("/team/update",postData);
        console.log(postData)
        if(res.data.code === 0){
            showSuccessToast("更新队伍成功");
            router.push({
                path:"/team/",
                replace:true
            })
        }else{
            showFailToast("更新队伍失败")
        }
    }

</script>

<style scoped>

</style>